<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/home.css" />
		<script src="./js/shipei.js"></script>
		<script src="./js/zepto.min.js"></script>
		<script src="./js/iscroll.js"></script>
		<style>
			.concat {
				width: 100%;
				margin-top: 55px;
				display: flex;
			}
			
			.list {
				width: 30%;
				height: auto;
				font-size: 14px;
				position: fixed;
				overflow-y: scroll;
			}
			
			.ul_li li {
				font-size: 16px;
				height: 2.6666666666rem;
				text-align: center;
				font-family: "bookman old style";
				/*line-height: 2.6666666666rem;*/
			}
			
			.lisstconcat {
				width: 70%;
				height: 100%;
				position: relative;
				left: 30%;
			}
			
			.lisstconcat div {
				height: 200px;
				font-size: 14px;
			}
			.lisstconcat div img{
				width: 100%;
			}
			.lisstconcat div  a{
				display: block;
				background: #222222;
				padding: 10px;
				color: #fff;
				width: 30%;
    			float: right;
    			margin-top: 20px;
			}
			.change {
				background: #FFFDEF;
			}
		</style>
	</head>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">医院简介</h1>
	</header>
	<div class="concat">
		<div class="list">
			<ul class="ul_li">
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
			</ul>
		</div>
		
		<div class="lisstconcat">
				<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>
			<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>
			<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>
			<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>
			<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>
			<div>
				<img src="" alt="" />
				<span></span>
				<a href="javascript:;"></a>
			</div>

		</div>
	</div>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			$(function() {
				
				$(".lisstconcat>div").hide()
				$(".lisstconcat>div").eq(0).show();
				$(".ul_li li").mouseover(function() {

					var _index = $(this).index();

					$(".lisstconcat>div").eq(_index).show().siblings().hide();

					$(this).addClass("change").siblings().removeClass("change");
				});
			});

			// 接口数据
			function formatterDateTime() {
				var date = new Date()
				var month = date.getMonth() + 1
				var datetime = date.getFullYear() +
					"" // "年"
					+
					(month >= 10 ? month : "0" + month) +
					"" // "月"
					+
					(date.getDate() < 10 ? "0" + date.getDate() : date
						.getDate()) +
					"" +
					(date.getHours() < 10 ? "0" + date.getHours() : date
						.getHours()) +
					"" +
					(date.getMinutes() < 10 ? "0" + date.getMinutes() : date
						.getMinutes()) +
					"" +
					(date.getSeconds() < 10 ? "0" + date.getSeconds() : date
						.getSeconds());
				return datetime;
			}

			$.ajax({
				type: 'post',
				url: 'http://route.showapi.com/87-60',
				dataType: 'json',
				data: {
					"showapi_timestamp": formatterDateTime(),
					"showapi_appid": '75669', //这里需要改成自己的appid
					"showapi_sign": 'a5b1d85b450c443cb02376b95c12dfe8', //这里需要改成自己的应用的密钥secret
					"page": "",
					"limit": "",	

					"hosName": "",
					"provinceName": "北京",
					"cityName": "",
					"type": "",
					"level": ""

				},

				error: function(XmlHttpRequest, textStatus, errorThrown) {
					alert("操作失败!");
				},
				success: function(result) {
					console.log(result)
					//				console.log(result.showapi_res_body.hospitalList) //console变量在ie低版本下不能用
					var newData = result.showapi_res_body.hospitalList;
					for(var i = 0; i < newData.length; i++) {
						var hosName = newData[i].hosName;
						var info = newData[i].info;
						var zzz = newData[i].img;
						console.log(newData[i].level)
						var kkk=newData[i].level
						$(".concat .list .ul_li li")[i].innerText = hosName;
						$(".concat .lisstconcat div span")[i].innerHTML = info;
						$(".concat .lisstconcat div a")[i].innerHTML = kkk;
						mui(".lisstconcat div img")[i].setAttribute("src", zzz)
						if($(".concat .lisstconcat div a")[i].innerHTML=='undefined'){
							$(".concat .lisstconcat div a")[i].innerHTML="";
							
						}
					}

				}
			});
		</script>
	</body>

</html>